<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<html xmlns:th="http://www.thymeleaf.org"></html>
<head>
  <meta charset="UTF-8">
  <script src="/webjars/jquery/3.1.1/jquery.min.js"></script>
  <script src="/webjars/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet"
        href="/webjars/bootstrap/3.3.7/css/bootstrap.min.css"/>
  <title>图书管理系统</title>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed"
              datatoggle="collapse"
              data-target="#bs-example-navbar-collapse-1"
              ariaexpanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/book/bookList">图书管理系统</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="/book/bookList">图书信息<span
                class="sr-only">
    (current)</span></a></li>
        <li><a href="#">新书推荐</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown"
             role="button" aria-haspopup="true" aria-expanded="false">
            用户管理 <span
                  class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">修改密码</a></li>
            <li><a href="#">添加地址</a></li>
            <li><a href="#">订单记录</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">退出登录</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>
<!-- 布局 3：9-->
<div class="container-fluid">
  <div class="row">
    <div class="col-md-3">
      <div class="list-group">
        <a href="#" class="list-group-item active">
          首页
        </a>
        <a href="/book/bookList" class="list-group-item">图书列表</a>
        <a href="/publisher/publisherList" class="list-group-item">出版社
          列表</a>
        <a href="/book/AuthorList" class="list-group-item">作者信息列表</a>
        <a href="#" class="list-group-item">关于我们</a>
      </div>
    </div>
    <div class="col-md-9">
      <div class="panel panel-default">
        <div class="panel-heading">书籍信息列表</div>
        <form class="navbar-form navbar-left" style="margin-bottom:
20px;" action="/book/SearchList">
          <div class="form-group">
            <button class="btn btn-success" type="button" data
                    toggle="modal" id="btn">添加新书</button>
          </div>
          <div class="form-group">
            <input type="text" class="form-control"
                   name="searchName" placeholder="搜素更多图书...">
          </div>
          <button type="submit" class="btn btn-primary">搜索</button>
        </form>
        <table class="table table-hover table-striped">
          <thead>
          <tr>
            <th>编号</th>
            <th>书籍名称</th>
            <th>价格</th>
            <th>出版日期</th>
            <th>图书出版社</th>
            <th>作者信息</th>
            <th>操作</th>
          </tr>
          </thead>
          <tbody>
          <tr th:each="book:${books}">
            <td th:text="${book.id}"></td>
            <td th:text="${book.title}"></td>
            <td th:text="${book.price}"></td>
            <td th:text="${#dates.format(book.publishDate,'yyyy-MM
dd')}"></td>
            <td th:text="${book.publisherName}"></td>
            <td th:text="${book.authorInfo}"></td>
            <td>
              <a th:href="@{/book/findById/{cid}(cid=${book.id})}"
                 class="btn btn-primary">编辑</a>
              <a th:href="@{/book/delete/{id}(id=${book.id})}"
                 class="btn btn-danger">删除</a>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" tabindex="-1" role="dialog" id="myModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria
                label="Close"><span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">添加新书籍</h4>
      </div>
      <div class="modal-body">
        <form th:action="@{/book/save}" method="post" class="form
horizontal" role="form">
          <div class="form-group">
            <label for="title" class="col-md-2 control-label">图书标题
            </label>
            <div class="col-md-8">
              <input type="text" id="title" name="title"
                     class="form-control"
                     placeholder="请输入图书标题...">
            </div>
          </div>
          <div class="form-group">
            <label for="price" class="col-md-2 control-label">图书价格
            </label>
            <div class="col-md-8">
              <input type="text" id="price" name="price"
                     class="form-control"
                     placeholder="请输入图书价格...">
            </div>
          </div>
          <div class="form-group">
            <label for="date" class="col-md-2 control-label">出版日期
            </label>
            <div class="col-md-8">
              <input type="date" id="date" name="publishDate"
                     class="form-control"
                     placeholder="请输入出版日期...">
            </div>
          </div>
          <div class="form-group">
            <label for="publish" class="col-md-2 control-label">出版社
              名
            </label>
            <div class="col-md-8">
              <select id="publish" name="publisherId" class="form
control">
                <option th:each="p:${publishers}"
                        th:text="${p.publisherName}" th:value="${p.id}"></option>
              </select>
            </div>
          </div>
          <div class="form-group">
            <label for="author" class="col-md-2 control-label">图书作
              者
            </label>
            <div class="col-md-8">
              <input type="text" id="author" name="authorInfo"
                     class="form-control"
                     placeholder="请输入图书作者...">
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data
                dismiss="modal">关闭</button>
        BookEditor.html
        <button type="button" class="btn btn-success" id="submit_btn">保
          存提交</button>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  //绑定按钮的点击事件
  $("#btn").click(function () {
    // 手动打开模态框
    $("#myModal").modal('show');
  });
  //手动关闭模态框
  $("#submit_btn").click(function () {
    $("form").submit();
    $('#myModal').modal('hide');
  });
</script>
</body>
</html>